<template>
  <div class="search"
       @mouseleave="leave()">
    <!-- 搜索框 -->
    <div class="search-item">
      <input type="text"
             class="mess"
             v-model="keywords"
             @focus="focus()"
             @keydown.enter="keyEnter()">
      <div class="search-icon">
        <img src="~assets/img/content/search.svg"
             alt />
      </div>
    </div>
    <!-- 热门推荐 -->
    <hot-search :searchlist='searchlist'
                v-show="isShow"
                @del="del"
                @recordClick='recordClick' />
    <!-- 搜索界面 -->
    <div class="suggest"
         v-show="isSuggest"
         v-if="keywords">
      <div class="top">
        搜索
        <span>'{{keywords}}'</span>相关的结果>
      </div>
      <dl>
        <dt>
        <dt v-if="songs && songs.length">
          <i class="iconfont icon-yinle"></i>单曲
        </dt>
        <dd v-for="(item ,index1) in songs"
            :key="index1+'song'"
            @click="handleSongsClick(index1)">
          {{item.name}}—{{item.artists[0].name}}
        </dd>
        <dt v-if="artists && artists.length">
          <i class="iconfont icon-wo"></i>歌手
        </dt>
        <dd v-for="(item, index2) in artists"
            :key="index2 + 'artists'"
            @click="handleArtistClick(index2)">{{item.name}}
        </dd>
        <dt v-if="albums && albums.length">
          <i class="iconfont icon-zhuanji" />专辑
        </dt>
        <dd v-for="(item, index3) in albums"
            :key="index3 + 'albums'"
            @click="handleAlbumClick(index3)">
          {{ item.name }}——{{ item.artist.name }}
        </dd>
        <dt v-if="playlists && playlists.length">
          <i class="iconfont icon-gedan" />歌单
        </dt>
        <dd v-for="(item, index4) in playlists"
            :key="index4 + 'playlists'"
            @click="handlePlayListClick(index4)">
          {{ item.name }}
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import HotSearch from './hotSearch'
import { _Suggest } from 'network/search'
import { debounce } from 'assets/common/tool'
import { _getSongsDetail, SongDetail } from "network/detail";
import { indexMixin } from 'mixin/indexMixin'
export default {
  name: 'MusicSearch',
  components: {
    HotSearch
  },
  data () {
    return {
      // 搜索历史
      searchlist: ['海底', '世间美好与你环环相扣', '灰狼'],
      // 推荐框显示与隐藏
      isShow: false,
      isSuggest: false,
      keywords: '',
      albums: [], // 专辑列表
      artists: [], // 歌手列表
      playlists: [], // 歌单列表
      songs: [], // 单曲列表
      musiclist: [], // 歌曲列表，单曲播放用
    }
  },
  mixins: [indexMixin],
  watch: {
    keywords () {
      if (this.keywords !== '') {
        this.isShow = false
        this.isSuggest = true
        this.suggest();
      }
    }
  },
  methods: {
    // 离开搜索框时，推荐搜索提示消失
    leave () {
      this.isShow = false
    },
    // 搜索框聚焦
    focus () {
      this.isShow = true
    },
    // 按下enter开始搜索
    keyEnter () {
      if (this.keywords === '' || this.keywords === null) return
      this.$router.push('/search/' + this.keywords)
      this.searchlist.unshift(this.keywords)
      this.keywords = ''
      this.isSuggest = false
      this.isShow = false
    },
    // 删除搜索历史
    del () {
      this.searchlist = []
    },
    // 点击搜索历史数组中的数据--重新搜索
    recordClick (index) {
      this.$router.push('/search/' + this.searchlist[index])
      this.isShow = false
    },
    // 关键字搜索，建议
    suggest: debounce(function () {
      if (!this.keywords) {
        return;
      }
      _Suggest(this.keywords).then(res => {
        const { albums, artists, playlists, songs } = res.data.result;
        this.albums = albums;
        this.artists = artists;
        this.playlists = playlists;
        this.songs = songs;
      });
    }, 500),
    // 处理搜索建议歌单点击
    handlePlayListClick (index) {
      this.$router.push('/musiclistdetail/' + this.playlists[index].id + '/' + new Date().getTime());
      this.isSuggest = false
    },
    // 搜索建议歌手点击
    handleArtistClick (index) {
      this.$router.push('/artist/' + this.artists[index].id);
      this.isSuggest = false;
    },
    // 专辑点击
    handleAlbumClick (index) {
      this.$router.push('/album/' + this.albums[index].id);
      this.isSuggest = false;
    },
    //  搜索歌曲点击,直接播放
    handleSongsClick (index) {
      // 歌曲详情直接播放
      _getSongsDetail(this.songs[index].id).then(res => {
        const song = new SongDetail(res.data.songs);
        this.musiclist.push(song);
      });
      this.PlayMusic();
      this.isSuggest = false
    }
  }
}
</script>

<style  scoped>
.search {
  height: 100%;
  width: 230px;
  margin-left: 100px;
  display: inline-block;
  position: relative;
  z-index: 3;
}
.search-item {
  line-height: 54px;
  height: 50%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  border-radius: 10px;
}
.mess {
  width: 80%;
  height: 100%;
  outline-style: none;
  color: #333;
  line-height: 16px;
  background: transparent;
  position: absolute;
  padding: 0px 10px;
  border: #f6f6f6;
  border-radius: 10px;
}
.search-icon {
  cursor: pointer;
  position: absolute;
  right: 2px;
  top: -2px;
}
.suggest {
  width: 400px;
  background: #fff;
  border: 2px solid #ccc;
  position: absolute;
  top: 54px;
  padding: 10px;
  color: #333;
}
.top {
  font-size: 13px;
}
.top span {
  color: #00aa85;
}
dl {
  width: 100%;
  font-size: 13px;
}
dl dt {
  width: 100%;
  display: flex;
  align-content: center;
  margin-top: 5px;
  padding: 5px 8px;
  box-sizing: border-box;
}
dl dd {
  padding: 5px 31px;
}
dd:hover {
  background: #adadad;
}
</style>
